
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="文档名称" prop="fileName">
                <el-input
                    v-model="queryParams.fileName"
                    placeholder="请输入文档名称"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-upload2"
                    size="mini"
                    @click="handleImport"
                >导入
                </el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="docList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center"/>
            <el-table-column type="index" label="序号" width="55" >
                <template slot-scope="scope">
                    <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="文档名称" align="center" prop="sourceFileName"></el-table-column>
            <el-table-column label="对比文档名称" align="center" prop="targetFileName"></el-table-column>
            <el-table-column label="差异总数" align="center" prop="diffNum"></el-table-column>
            <el-table-column label="上传时间" align="center" prop="operationTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.operationTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    <el-button type="text" @click="handleEditDoc(scope.row.sourceFileId)" size="mini" >编辑原文档</el-button>
                    <el-button type="text" @click="handleEditDoc(scope.row.targetFileId)" size="mini" >编辑对比文档</el-button>
                    <el-button type="text" @click="handleShowDiff(scope.row)" size="mini">对比结果</el-button>
                    <el-button type="text" @click="handleShowReport(scope.row)" size="mini">对比分析报告</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <el-dialog title="上传文档" :visible.sync="uploadOpen" width="900px" append-to-body>
            <el-row :gutter="20">
                <el-col :span="11">
                    <el-upload
                        ref="upload1"
                        :limit="2"
                        accept=".doc, .pdf, .docx"
                        action=""
                        :headers="upload.headers"
                        :disabled="upload.isUploading1"
                        :on-progress="handleFileUploadProgress1"
                        :on-success="handleFileSuccess1"
                        :on-change="changeFile"
                        :auto-upload="false"
                        drag
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip text-center" slot="tip">
                            <span>仅允许导入doc、docx、pdf格式文件。</span>
                        </div>
                    </el-upload>
                </el-col>
                <el-col :span="2">
                    <div class="vsStyle">VS</div>
                </el-col>
                <el-col :span="11">
                    <el-upload
                        ref="upload2"
                        :limit="1"
                        action=""
                        accept=".doc, .pdf, .docx"
                        :headers="upload.headers"
                        :disabled="upload.isUploading2"
                        :on-progress="handleFileUploadProgress2"
                        :on-success="handleFileSuccess2"
                        :on-change="changeFile2"
                        :auto-upload="false"
                        drag
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip text-center" slot="tip">
                            <span>仅允许导入doc、docx、pdf格式文件。</span>
                        </div>
                    </el-upload>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :disabled="noSubmit" @click="submitFileForm">确 定</el-button>
                <el-button @click="uploadOpen = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="对比分析报告"
            :visible.sync="reportOpen"
            width="80%"
            append-to-body
            :close-on-click-modal="false">
            <el-form ref="docFormRef" :model="docForm" inline label-width="120px">
                <el-form-item label="当前文档名称：">{{docForm.sourceFileName}}</el-form-item>
                <el-form-item label="对比文档名称：">{{docForm.targetFileName}}</el-form-item>
                <el-form-item label="报告生成时间：">{{parseTime(docForm.operationTime)}}</el-form-item>
                <el-form-item style="float: right">
                    <el-button type="primary" v-print="print" size="mini">打印</el-button>
                    <el-button type="primary" size="mini" @click="handleExportReport(docForm.id)">导出</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="reportTable" height="40vh" id="printArea">
                <el-table-column type="index" label="序号" width="55" ></el-table-column>
                <el-table-column prop="leftContent" label="原文内容" ></el-table-column>
                <el-table-column prop="rightContent" label="对比文档内容"  ></el-table-column>
                <el-table-column prop="leftLocation" label="原文位置" show-overflow-tooltip ></el-table-column>
                <el-table-column prop="rightLocation" label="对比文档位置" show-overflow-tooltip ></el-table-column>
                <el-table-column prop="type" label="差异类型" show-overflow-tooltip ></el-table-column>
                <el-table-column label="操作" align="center" >
                    <template slot-scope="scope">
                        <el-button @click="handlePosition(scope.row)" type="text">定位到差异处</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import {getToken} from "@/utils/auth";
import {
    submitFile,
    getDiffWordList, downloadDiffReport,
    getDiffReport,
    delCompareLog, editDoc
} from '@/api/compare'
import store from "@/store";
export default {
    data(){
        return{
            print: {
                id: 'printArea',
                popTitle: '打印', // 打印配置页上方标题
                extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
                preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
                previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
                previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
                zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
                previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
                previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
                beforeOpenCallback() {}, // 开启打印前的回调事件
                openCallback() {}, // 调用打印之后的回调事件
                closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
                url: '',
                standard: '',
                extraCss: '',
            },
            total:1,
            queryParams:{
                fileName:'',  //文档名称
                pageSize:10,
                pageNum:1,
            },
            loading:false,
            docList:[
                // {
                //     id:1,
                //     docName:'文档1',
                //     compareDocName:'文档2',
                //     diffNum:12,
                //     uploadTime:'2024-10-12 10:12:45'
                // }
            ],
            //导入参数
            uploadOpen:false,   // 是否显示弹出层（导入）
            upload: {
                // 是否禁用上传
                isUploading1: false,
                isUploading2: false,
                // 设置上传的请求头部
                headers: {Authorization: "Bearer " + getToken()},
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/common/upload"
            },
            noSubmit:false,  //能否提交文件
            file1:null,
            file2:null,
            reportOpen:false,
            docForm:{
                sourceFileName:'',
                targetFileName:'',
                operationTime:'2024-11-27 15:43:34',
            },
            reportTable:[
                // {
                //     content:'当入侵者要攀爬进入时，电子围栏会遭到破坏，',
                //     content2:'当入侵者执意攀爬进入时，电子围栏会遭到破坏，',
                //     position:'4.3 报警功能',
                //     position2:'4.3 报警功能',
                //     diffType:'增加'
                // },
                // {
                //     content:'电子围栏主机差电压输出：周界的每条合金线上都有电击，相邻线之间有压差，使周界电子围栏无懈可击',
                //     content2:'电子围栏主机差电压输出：周界的每条合金线上都有电击，相邻线之间有压差',
                //     position:'5.1章节',
                //     position2:'5.1章节',
                //     diffType:'删减'
                // }
            ],

        }
    },
    mounted() {
        this.handleQuery();
    },
    methods:{
        handleQuery(){
            this.queryParams.pageNum = 1;
            this.getList();
        },
        getList(){
            getDiffWordList(this.queryParams).then(res=>{
                this.docList = res.rows;
                this.total = res.total;
            })
        },
        resetQuery(){
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 导入按钮操作 */
        handleImport() {
            this.uploadOpen = true;
        },
        //变更文件，判断是否可以上传文件
        changeFile(file,fileList){
            console.log(file);
            this.file1 = file;
            console.log(fileList);
        },
        changeFile2(file,fileList){
            console.log(file);
            this.file2 = file;
            console.log(fileList);
        },
        // 文件上传中处理
        handleFileUploadProgress1(event, file, fileList) {
            this.upload.isUploading1 = true;
        },
        // 文件上传成功处理
        handleFileSuccess1(response, file, fileList) {
            this.upload.isUploading1 = false;
            this.uploadSuccess();
        },
        // 文件上传中处理
        handleFileUploadProgress2(event, file, fileList) {
            this.upload.isUploading2 = true;
        },
        // 文件上传成功处理
        handleFileSuccess2(response, file, fileList) {
            this.upload.isUploading2 = false;
            this.uploadSuccess();
        },
        //文件上传成功
        uploadSuccess(){
            this.uploadOpen = false;
            this.$refs.upload1.clearFiles();
            this.$refs.upload2.clearFiles();
            this.$modal.msgSuccess("导入成功");
            this.getList();
        },
        // 提交上传文件
        submitFileForm() {
            // console.log(this.$refs.upload1);
            this.param = new FormData();
            this.param.append('file1',this.file1.raw);
            this.param.append('file2',this.file2.raw);
            console.log(this.$refs.upload2);
            const loading = this.$loading({
                lock: true,
                text: '正在上传并对比文件，请稍后',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            submitFile(this.param).then(res=>{
                this.uploadSuccess();
                loading.close();
            }).catch(err=>{
                loading.close();
            })
            // this.$refs.upload1.submit();
            // this.$refs.upload2.submit();
        },
        handleSelectionChange(selection){

        },
        //删除对比记录
        handleDelete(row){
            this.$modal.confirm('是否确认删除该条对比记录信息？').then(function () {
                return delCompareLog(row.id);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {

            });
        },
        //跳转至编辑页面
        handleEditDoc(id){
            editDoc({id:id}).then(response => {
                console.log(response.data)
            })
            // this.$router.push({
            //     path:'/compare/editDoc',
            //     query:{
            //         type:'editDoc',
            //         id:id
            //     }
            // })
        },
        //展示对比结果页面
        handleShowDiff(row){
            this.$router.push({
                path:'/compare/showDiff',
                query:{
                    type:'showDiff',
                    id:row.id,
                    sourceFileId:row.sourceFileId,   //源文件
                    sourceFileMountPath:row.sourceFilePath,
                    targetFileId:row.targetFileId,   //对比文件
                    targetFileMountPath:row.targetFilePath,
                }
            });
        },
        handleShowReport(row){
            this.docForm = JSON.parse(JSON.stringify(row));
            getDiffReport({logId:row.id}).then(res=>{
                this.reportTable = res.data;
            });
            this.reportOpen = true;
        },
        //导出对比报告
        handleExportReport(id){
            this.download('contras/diff/export', {
            logId:id
            }, `对比分析报告_${new Date().getTime()}.xlsx`)
        },
        //定位到差异处
        handlePosition(row){
            this.$router.push({
                path:'/compare/showDiff',
                query:{
                    type:'diffPosition',
                    id:this.docForm.id,
                    sourceFileId:this.docForm.sourceFileId,   //源文件
                    sourceFileMountPath:this.docForm.sourceFilePath,
                    targetFileId:this.docForm.targetFileId,   //对比文件
                    targetFileMountPath:this.docForm.targetFilePath,
                    infoStr:JSON.stringify(row),
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
.vsStyle{
    line-height: 180px;
    font-size: 20px;
    font-weight: 600;
    color: #99a9bf;
    text-align: center;
}

</style>
